import React, { useState } from "react";
import { Text, Pressable, View } from "react-native";
import styles from "./index.style";
import Ionicons from "@expo/vector-icons/Ionicons";

interface MenuItemProps {
  item: string;
  onPress: (item: string) => void;
  setShow: React.Dispatch<React.SetStateAction<boolean>>;
}

// 根据菜单项获取对应的图标名称
const getIconForMenuItem = (item: string): string => {
  switch (item) {
    case "复制":
      return "copy-outline";
    case "转发":
      return "arrow-redo-outline";
    case "回复":
      return "return-down-back-outline";
    case "删除":
      return "trash-outline";
    default:
      return "ellipsis-horizontal";
  }
};

/**
 * MenuItem 组件 - 菜单项
 * @author FlanChan
 * @param item 菜单项文本
 * @param onPress 点击回调
 * @param setShow 设置菜单显示状态
 * @constructor
 */
const MenuItem = ({ item, onPress, setShow }: MenuItemProps) => {
  const [selectedItem, setSelectedItem] = useState<string | null>(null);
  const iconName = getIconForMenuItem(item);

  return (
    <View style={styles.itemContainer}>
      <Pressable
        onPress={() => {
          setSelectedItem(item);
          onPress(item);
          setTimeout(() => {
            setSelectedItem(null);
            setShow(false);
          }, 150);
        }}
        android_ripple={{ color: "rgba(255,255,255,0.2)" }}
        style={({ pressed }) => [
          styles.pressableItem,
          pressed && styles.pressedBackground
        ]}
      >
        <Ionicons 
          name={iconName as any} 
          size={18} 
          color={selectedItem === item ? "#4FC3F7" : "#fff"} 
          style={styles.itemIcon}
        />
        <Text
          style={[
            styles.menuItem,
            selectedItem === item && styles.selectedItem,
          ]}
        >
          {item}
        </Text>
      </Pressable>
    </View>
  );
};

export default MenuItem;
